<template>
  <a-card :hoverable="true" :title="taskData.taskCategoryName">
    <h3>{{ taskData.title }}</h3>
    <p>{{ taskData.description }}</p>
    <a-row type="flex" justify="space-between" align="bottom">
      <a-col :span="4">
        <p class="height-100">奖励：+{{ taskData.timeMoney }} 有赞币</p>
      </a-col>
      <a-col :span="4" align="right">
        <p class="height-80">
          <a-button>查看教程</a-button>
          <a-button type="primary">领取奖励</a-button>
        </p>
      </a-col>
    </a-row>
  </a-card>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import request from '@/utils/request'

export default defineComponent({
  setup() {
    const taskData = reactive({
      createTime: '',
      description: '',
      id: 0,
      taskCategoryId: 0,
      taskCategoryName: '',
      timeMoney: 0,
      title: '',
      updateTime: '',
      weight: 0,
    })

    request.get('/api/task/getCurrent').then((res) => {
      taskData.createTime = res.createTime
      taskData.description = res.description
      taskData.id = res.id
      taskData.taskCategoryId = res.taskCategoryId
      taskData.taskCategoryName = res.taskCategoryName
      taskData.timeMoney = res.timeMoney
      taskData.title = res.title
      taskData.updateTime = res.updateTime
      taskData.weight = res.weight
    })

    return {
      taskData,
    }
  },
})
</script>

<style></style>
